{% extends 'base.html' %}
{% block title %}个人信息{% endblock %}
{% block link %}
  <link rel="stylesheet" href="/static/css/customer/info.css">{% endblock %}
{% block js %}
  <script src="/static/js/customer/info.js"></script>
{% endblock %}
{% block header %}{% include 'include/_header.html' %}{% endblock %}
{% block content %}
  <main id="main">
    <div class="layui-container container">
      <!-- 头像上传 start -->
      <div class="portrait-box">
                <p>头像：</p>
                <!-- layui示例--文件上传--拖拽上传 -->
                <div class="layui-upload-drag" id="portrait">
                    <div {% if not user.customerdetail.portrait %} class="layui-hide"{% endif %} id="uploadDemoView">
                        <hr>

                        <img alt="上传成功后渲染" style="max-width: 196px" {% if user.customerdetail.portrait %}src="{{ user.customerdetail.portrait }}"{% endif %}>
                    </div>
                    <i class="layui-icon"></i>
                    <p>点击上传，或将图片拖拽到此处</p>
                </div>
            </div>
      <!-- 头像上传 end -->
      <!-- 个人信息 start -->
      <div class="info-box">
        <!-- layui示例--表单--表单集合演示 -->
        <form action="" class="layui-form" method="post">
          {% csrf_token %}
          <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
              {{ form.nickname }}
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
              {{ form.phone }}
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
              {{ form.age }}
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" style="">
              {{ form.sex }}
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
              {{ form.address }}
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
              {{ form.birthday }}
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button type='submit' class="layui-btn" lay-submit lay-filter="info">立即保存</button>
            </div>
          </div>
        </form>
      </div>
      <!-- 个人信息 end -->
    </div>
  </main>
{% endblock %}
{% block footer %}
{% endblock %}